<template>
  <div v-loading.lock="loading"
    class="base-content storage-product-batch-list">
    <div class="basic-info">
      <el-form ref="queryForm"
        :inline="true"
        :model="queryForm"
        label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="批次号"
              prop="batchNum">
              <el-input v-model="queryForm.batchNum"
                placeholder="请输入批次号"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库"
              prop="storageId">
              <el-select v-model="queryForm.storageId"
                placeholder="请选择仓库"
                filterable
                clearable>
                <el-option v-for="item in storageIdData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="危化品编号"
              prop="productNum">
              <el-input v-model="queryForm.productNum"
                placeholder="请输入产品编号"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="危化品名称"
              prop="productName">
              <el-input v-model="queryForm.productName"
                placeholder="请输入产品编号"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格型号"
              prop="specifications">
              <el-input v-model="queryForm.specifications"
                placeholder="请输入产品编号"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商"
              prop="manufacturerName">
              <el-input v-model="queryForm.manufacturerName"
                placeholder="请输入生产商名"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库单号"
              prop="orderNum">
              <el-input v-model="queryForm.orderNum"
                placeholder="请输入入库单号"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="批次生成时间"
              prop="batchCreateTime">
              <el-date-picker v-model="queryForm.batchCreateTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="isOverlook">
              <el-checkbox v-model="queryForm.isOverlook">忽略剩余库存为0</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="过期时间"
              prop="expirationTime">
              <el-date-picker v-model="queryForm.expirationTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="在库天数">
              <el-select v-model="queryForm.inStoreDateCompare"
                placeholder="请选择"
                clearable
                style="float:left;width: 40%;">
                <el-option label="大于"
                  :value="1" />
                <el-option label="小于"
                  :value="2" />
                <el-option label="大于等于"
                  :value="3" />
                <el-option label="小于等于"
                  :value="4" />
              </el-select>
              <el-input v-model="queryForm.inStoreDate"
                placeholder="请输入"
                clearable
                style="float:left;width: 60%;" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item prop="isExpiration">
              <el-checkbox v-model="queryForm.isExpiration">过期未消耗</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary"
              @click="onQuery">查询</el-button>
            <el-button @click="cancelForm">清空</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div class="base-content-operate">
        <el-button type="primary"
          icon="el-icon-document-copy"
          @click="exportData">导出</el-button>
      </div>

      <el-table :data="list"
        height="calc(100% - 130px)"
        style="width: 100%">
        <el-table-column label="批次号">
          <template slot-scope="scope">
            {{ scope.row.batchNum }}
          </template>
        </el-table-column>
        <el-table-column label="仓库">
          <template slot-scope="scope">
            {{ scope.row.storageName }}
          </template>
        </el-table-column>
        <el-table-column label="危化品编号">
          <template slot-scope="scope">
            {{ scope.row.productNum }}
          </template>
        </el-table-column>
        <el-table-column label="危化品名称">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template slot-scope="scope">
            {{ scope.row.specifications }}
          </template>
        </el-table-column>
        <el-table-column label="供应商">
          <template slot-scope="scope">
            {{ scope.row.manufacturerName }}
          </template>
        </el-table-column>
        <el-table-column label="生产日期">
          <template slot-scope="scope">
            {{ scope.row.dateManufacture | dateTimeFormat }}
          </template>
        </el-table-column>
        <el-table-column label="过期时间">
          <template slot-scope="scope">
            {{ scope.row.expirationTime | dateTimeFormat }}
          </template>
        </el-table-column>
        <el-table-column label="入库单号">
          <template slot-scope="scope">
            {{ scope.row.orderNum }}
          </template>
        </el-table-column>
        <el-table-column label="责任人">
          <template slot-scope="scope">
            {{ scope.row.personLiableName }}
          </template>
        </el-table-column>
        <el-table-column label="入库类型">
          <template slot-scope="scope">
            {{ scope.row.orderTypeName }}
          </template>
        </el-table-column>
        <el-table-column label="初始库存">
          <template slot-scope="scope">
            {{ scope.row.initRepertory }}
          </template>
        </el-table-column>
        <el-table-column label="剩余库存">
          <template slot-scope="scope">
            {{ scope.row.surplusRepertory }}
          </template>
        </el-table-column>
        <el-table-column label="批次生成时间">
          <template slot-scope="scope">
            {{ scope.row.batchCreateTime }}
          </template>
        </el-table-column>
        <el-table-column label="批次消耗时间">
          <template slot-scope="scope">
            {{ scope.row.batchConsumeTime }}
          </template>
        </el-table-column>
        <el-table-column label="在库天数">
          <template slot-scope="scope">
            {{ scope.row.inStoreDate }}
          </template>
        </el-table-column>
      </el-table>

      <BasePagination :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange" />
    </div>
  </div>
</template>

<script>
import { getList } from "../../../api/Storage/StorageProductBatch.js";
import { getStorageList } from "../../../api/Storage/StorageOrderIn.js";
import moment from 'moment';
export default {
  name: "StorageProductBatchList",
  filters: {
    dateTimeFormat(dateTime) {
      if (!dateTime) {
        return dateTime;
      }
      return moment(dateTime).format("YYYY-MM-DD");
    },
  },
  data() {
    return {
      loading: true,
      list: [],
      storageIdData: [],
      queryForm: {
        batchNum: "",
        orderNum: "",
        productNum: "",
        productName: "",
        specifications: "",
        storageId: null,
        manufacturerName: null,
        expirationTime: [],
        batchCreateTime: [],
        inStoreDateCompare: null,
        inStoreDate: null,
        isOverlook: true,
        isExpiration: null
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {
    this.init();
    this.getList();
  },
  methods: {
    async init() {
      await this.getStorageOptions();
    },
    getStorageOptions() {
      return new Promise((resolve) => {
        getStorageList().then((res) => {
          this.storageIdData = res.data.dataList;
          resolve();
        });
      })
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.queryForm.inStoreDateCompare = null
      this.queryForm.inStoreDate = null
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      const { batchCreateTime, expirationTime, ...queryForm } = this.queryForm
      getList({
        ...queryForm,
        startBatchCreateTime: Array.isArray(batchCreateTime) ? batchCreateTime[0] : '', // 批次生成时间-开始
        endBatchCreateTime: Array.isArray(batchCreateTime) ? batchCreateTime[1] : '', //  批次生成时间-结束
        startExpirationTime: Array.isArray(expirationTime) ? expirationTime[0] : '', //  过期时间-开始
        endExpirationTime: Array.isArray(expirationTime) ? expirationTime[1] : '', //   过期时间-结束
        pageIndex: this.pagination.pageIndex,
        pageSize: this.pagination.pageSize
      })
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getList();
    },
    // 导出
    exportData() {
      var list = []
      getList({
        ...this.queryForm,
        pageIndex: 1,
        pageSize: 1000000
      }).then((res) => {
        list = res.data.dataList ? res.data.dataList : [];
        import("@/vendor/Export2Excel").then((excel) => {
          const tHeader = [
            "批次号",
            "仓库",
            "危化品编号",
            "危化品名称",
            "规格型号",
            "供应商",
            "生产日期",
            "过期时间",
            "入库单号",
            "责任人",
            "入库类型",
            "初始库存",
            "剩余库存",
            "批次生成时间",
            "批次消耗时间",
            "在库天数",
          ];
          const filterVal = [
            "batchNum",
            "storageName",
            "productNum",
            "name",
            "specifications",
            "manufacturerName",
            "dateManufacture",
            "expirationTime",
            "orderNum",
            "personLiableName",
            "orderTypeName",
            "initRepertory",
            "surplusRepertory",
            "batchCreateTime",
            "batchConsumeTime",
            "inStoreDate",
          ];
          const data = this.formatJson(filterVal, list);
          excel.export_json_to_excel({
            header: tHeader, // 表头
            data, // 数据
            filename: "库存批次信息", // 导出文件名
            autoWidth: true, // 导出宽度自动
            bookType: "xlsx", // 导出后缀
          });
        });
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
  },
};
</script>
<style lang="scss">.storage-product-batch-list {
  .el-form-item__content {
    width: calc(100% - 100px);

    .el-checkbox {
      margin-left: 50px;
    }
  }
}</style>
